<div id="demo" data-view="samples/Animation/demo">
<style type="text/css">
	#radar-container {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -80px;
  		margin-top: -80px;
	}
	#radar-container span {
		position: absolute;
		width: 80px;
		height: 80px;
		border: 80px solid #fff;
		border-radius: 999px;
		animation: radar 2s infinite linear;
		-webkit-animation: radar 2s infinite linear;
		opacity: 0;
	}
	#radar-container span:nth-child(1) {
		animation-delay: 0s;
		-webkit-animation-delay: 0s;
	}
	#radar-container span:nth-child(2) {
		animation-delay: 0.66s;
		-webkit-animation-delay: 0.66s;
	}
	#radar-container span:nth-child(3) {
		animation-delay: 1.33s;
		-webkit-animation-delay: 1.33s;
	}
	@keyframes radar {
		0% { transform: scale(0); opacity: 0; }
		25% { transform: scale(0); opacity: 0.5; }
		50% { transform: scale(1); opacity: 1; }
		75% { transform: scale(1.5); opacity: 0.5; }
		100% { transform: scale(2); opacity: 0; }
	}
	@-webkit-keyframes radar {
		0% { -webkit-transform: scale(0); opacity: 0; }
		25% { -webkit-transform: scale(0); opacity: 0.5; }
		50% { -webkit-transform: scale(1); opacity: 1; }
		75% { -webkit-transform: scale(1.5); opacity: 0.5; }
		100% { -webkit-transform: scale(2); opacity: 0; }
	}
</style>
<header class="bar bar-nav blue-bar">
    <button class="btn btn-link btn-nav pull-left back">
        <span class="icon icon-left-nav"></span>
    </button>
    <h1 class="title">Animation Demo</h1>
</header>
<div class="content" style="background-color:lightseagreen">
	<div id="radar-container">
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
</div>